<template>
  <div class="table-demo">
    <h2>表格示例</h2>
    <h-table
      :columns="columns"
      :data="tableData"
      @row-click="handleRowClick"
      @refresh="handleRefresh"
      @field-change="handleFieldChange"
    >
      <!-- 自定义操作列 -->
      <template #action="{ row }">
        <van-button 
          size="small" 
          type="primary" 
          class="edit-btn"
          @click.stop="handleEdit(row)"
        >
          编辑
        </van-button>
        <van-button 
          size="small" 
          type="danger" 
          class="delete-btn"
          @click.stop="handleDelete(row)"
        >
          删除
        </van-button>
      </template>
    </h-table>
    
    <div class="add-row" @click="handleAddRow">
      <van-button block>+ 添加数据</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HTable from '@/components/table.vue'
import { showToast } from 'vant'

// 定义表格列配置
const columns = [
  { title: '订单编号', prop: 'orderId', width: '120px', fixed: 'left' },
  { title: '商品名称', prop: 'productName', width: '150px' },
  { title: '数量', prop: 'quantity', width: '80px' },
  { title: '单价', prop: 'price', width: '100px' },
  { title: '订单状态', prop: 'status', width: '100px' },
  { title: '下单时间', prop: 'orderTime', width: '180px' },
  { title: '操作', slot: 'action', width: '100px', fixed: 'right' }
]

// 示例数据
const tableData = ref([
  {
    orderId: 'ORD20240301001',
    productName: 'iPhone 15 Pro',
    quantity: 1,
    price: '8999.00',
    status: '已付款',
    orderTime: '2024-03-01 10:30:25'
  },
  {
    orderId: 'ORD20240301002',
    productName: 'MacBook Air',
    quantity: 2,
    price: '7999.00',
    status: '待发货',
    orderTime: '2024-03-01 11:45:30'
  },
  {
    orderId: 'ORD20240301003',
    productName: 'AirPods Pro',
    quantity: 3,
    price: '1999.00',
    status: '已发货',
    orderTime: '2024-03-01 14:20:15'
  },
  {
    orderId: 'ORD20240301004',
    productName: 'iPad Air',
    quantity: 1,
    price: '4799.00',
    status: '已完成',
    orderTime: '2024-03-01 16:05:40'
  },
  {
    orderId: 'ORD20240301005',
    productName: 'Apple Watch',
    quantity: 2,
    price: '3299.00',
    status: '待付款',
    orderTime: '2024-03-01 17:55:10'
  }
])

// 行点击事件
const handleRowClick = (row, index) => {
  console.log('点击行:', row)
  showToast(`点击了订单：${row.orderId}`)
}

// 编辑事件
const handleEdit = (row) => {
  showToast(`编辑订单：${row.orderId}`)
}

// 删除事件
const handleDelete = (row) => {
  showToast(`删除订单：${row.orderId}`)
}

// 添加行
const handleAddRow = () => {
  tableData.value.push({
    orderId: '',
    productName: '',
    quantity: '',
    price: '',
    status: '',
    orderTime: ''
  })
}

// 刷新事件
const handleRefresh = () => {
  showToast('刷新数据')
}

// 字段变化事件
const handleFieldChange = ({ value, row, prop }) => {
  console.log('字段变化:', prop, value)
  showToast(`修改${prop}为：${value}`)
}
</script>

<style scoped>
.table-demo {
  padding: 20px;
  background: #fff;
}

h2 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.edit-btn {
  margin-right: 8px;
}

.add-row {
  margin-top: 20px;
  padding: 10px;
  text-align: center;
}

:deep(.van-button) {
  border: 1px dashed #dcdfe6;
  color: #606266;
  background: transparent;
}

:deep(.van-button--primary) {
  border: 1px solid #1989fa;
  color: #1989fa;
}

:deep(.van-button--danger) {
  border: 1px solid #ee0a24;
  color: #ee0a24;
}

:deep(.van-button:active) {
  background: #f5f7fa;
}
</style>